<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优惠活动</title>
    <style>
        body {
            text-align: center;
            position: relative;
        }

        * {
            margin: 0px;
            padding: 0px;

        }

        ul {
            list-style: none;
        }

        #head1111 {
            width: 100%;
            height: 80px;
        }

        #menu1111 ul li a {
            text-decoration: none;
            color: rgb(71, 47, 52);

        }

        #menu1111 ul {
            width: 800px;
            position: absolute;
            right: 80px;
        }

        #menu1111 ul li {
            float: left;
            width: 80px;
            height: 30px;
            line-height: 30px;
            margin: 20px auto;
        }

        #menu1111 ul li a:hover {
            color: rgb(248, 90, 117);
        }

        #logo1111 {
            position: absolute;
            top: 5px;
            left: 100px;
            width: 100px;
            height: 100px;
        }

        .ph1111 {
            width: 70px;
            height: 70px;
        }

        .zhao {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 4px solid #ff0;
            border-image: url("images/discount_border.png") 50 / 30px repeat;
            background-color: rgba(ff, ff, ff, 0.5);
            z-index: 3;
        }

        #cubic img {

            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;

        }

        #stage {

            perspective: 8000px;
            perspective-origin: 50% 50%;
            -webkit-perspective: 8000px;
            -webkit-perspective-origin: 50% 50%;

        }

        #cubic {

            position: relative;
            transform-style: preserve-3d;
            width: 1320px;
            height: 500px;

            animation: myfirst 28s infinite linear 500ms;



        }

        @keyframes myfirst {
            0% {
                transform: rotateY(0deg)
            }

            10% {
                transform: rotateY(90deg)
            }

            25% {
                transform: rotateY(90deg)
            }

            35% {
                transform: rotateY(180deg)
            }

            50% {
                transform: rotateY(180deg)
            }

            60% {
                transform: rotateY(270deg)
            }

            75% {
                transform: rotateY(270deg)
            }

            85% {
                transform: rotateY(360deg)
            }

            100% {
                transform: rotateY(360deg)
            }

        }


        #cubic_w {
            position: relative;
            transform-style: preserve-3d;
            width: 1320px;
            height: 500px;

            transition: all 1s;

        }


        #stage #cubic>div {

            position: absolute;
            left: 0px;
            top: 20px;
            opacity: 1;
            width: 1320px;
            height: 500px;
            overflow: hidden;


        }

        .front {
            transform: translateZ(660px);
        }

        .behind {
            transform: rotateY(180deg) translateZ(660px);
        }

        .left {
            transform: rotateY(90deg) translateZ(660px);
        }

        .right {
            transform: rotateY(-90deg) translateZ(660px);
        }


        #discount_left {
            position: absolute;
            left: 80px;
            top: 260px;
            width: 80px;
            height: 80px;
            background-color: rgba(00, 00, 00, 0.2);
            z-index: 4;
            border-radius: 30px 30px;
            background-size: 80px 80px;
            background-position: -15px 0;
            background-image: url("images/discount_left.png");
        }

        #discount_left:hover {
            background-color: rgba(00, 00, 00, 0.4);
        }

        #discount_right {
            position: absolute;
            right: 50px;
            top: 260px;
            width: 80px;
            height: 80px;
            background-color: rgba(00, 00, 00, 0.2);
            z-index: 4;
            border-radius: 30px 30px;
            background-size: 80px 80px;
            background-position: -10px 0;
            background-image: url("images/discount_right.png");

        }


        #discount_right:hover {
            background-color: rgba(00, 00, 00, 0.4);
        }

        #list>h2 {
            height: 100px;
            line-height: 50PX;
            width: 500px;
            margin: 20px auto;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            text-align: center;
            font-size: 24px;
            color: #f00;
        }

        #list>h1 {
            height: 50px;
            line-height: 50PX;
            width: 500px;
            margin: 0 auto;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            text-align: center;
            font-size: 40px
        }


        #list {
            border: 1px solid #ccc;
            margin: 100px auto;
            width: 100%;

        }

       
  footer {
            width: 100%;
            height: 150px;
            background: #eee;
            margin-top: 80px;
        }

        footer ul {
            width: 600px;
            height: 50px;
            margin: 0 auto;
        }

        footer ul li {
            position: relative;
            width: 120px;
            height: 50px;
            line-height: 50px;
            float: left;
            text-align: center
        }

        #footer1 #img2 {
            margin-left: 50px;
            margin-top: 10px;
            width: 30px;
            height: 30px;
            position: relative;
            bottom: 15px;
            text-align: center
        }

        #footer1 #span2 {
            position: relative;
            top: -25px;
            margin-right: 50px;
        }

        #footer1 p {
            width: 100%;
            height: 30px;
            text-align: center
        }

        #footer1 {
            margin-top: 20px;
            width: 500px;
            height: 30px;
            margin: 0 auto;
        }

        footer p {
            margin-top: 20px;
            text-align: center;
        }

        #float>a {
            float: left;
            position: fixed;
            bottom: 40px;
            right: 0;
            width: 50px;
            height: 50px;
            background-size: 100% 100%;
            background-image: url("images/shopping.png")
        }

        #foodsList {
            width: 1200px;
            margin: 20px auto;
            overflow: hidden;
            border: 1px solid #ccc;
            position: relative;
        }

        #foods li {
            width: 250px;
            height: 300px;
            float: left;
            border: 1px solid #ccc;
            margin: 13px;
            padding: 10px
        }

        #foods li span img:nth-child(1) {
            width: 200px;
            height: 200px;
           
        }
        #foods li span{
            
            display: inline-block;
            width: 200px;
            height: 200px; overflow: hidden;
        }
        #foods li img:nth-child(1):hover {
            width: 300px;
            height: 300px; 
            position: relative;
            left: -50px;
           
        }

        #foods li>img{
            width: 30px;
            height: 30px;
            float: right;
            position: relative;
            left: -10px;
            top: -25px;
        }

        #foods li>h2 {
            height: 50px;
             
        }

        #foods li img+h2 {
            font-size: 16px;
            color: rgb(99, 79, 57);
            margin-bottom: 10px;

        }
#foods li>p{
    text-align: left;
}
        #foods li img+h2 {
            float: left;
            font-size: 20px;
            color: #666;
        }

        #pages {
            clear: both;
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -156px;
            overflow: hidden;
            text-align: center;
        }
#pages ul{
    margin: 0 auto
}
        #pages li {
            float: left;
            width: 12px;
            height: 12px;
            text-align: center;
            line-height: 12px;
            border: 1px solid #ccc;
            margin-right: 10px;
            font-size: 10px;
            cursor: pointer;
        }

        #pages li:hover {
            border: 1px solid rgb(99, 79, 57);
        }

        #foodsList div {
            clear: both;
            height: 30px;
            width: 1200px;
            position: relative;
        }

        #foodsList li.selected {
            border: 1px solid rgb(99, 79, 57);
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        var  current=0;
        var pageSize = 8;
        var currentPage = 0
        var pageCount = 0
        window.onload = function () {
   
           
            pageCount = Math.ceil(jsondata.foods.length / pageSize);
            var pages = document.getElementById('pages')
            showIndex(0)
            // console.log(str)
            var strPages = ''
            for (var index = 0; index < pageCount; index++) {
                strPages += '<li onclick="show(' + index + ')">' + index + '</li>'
            }
            pages.innerHTML = strPages;
            pages.firstElementChild.className = 'selected'
        }
        function showIndex() {
            var ul = document.getElementById('foods')
            var str = ''
            for (var index = currentPage * pageSize; index < (currentPage + 1) * pageSize && index < jsondata.foods.length; index++) {
                var food = jsondata.foods[index]
                str += ' <li><span><img src="images/' + food.image + '" alt=""></span><h2>' + food.name + '</h2><p>' + food.way + '</p><img src="images/shopping.png" class="shopping" onclick="buy()"></li>'
            }

            ul.innerHTML = str
        }
        function show(index) {
            currentPage = index
            showIndex();
            setPageLi(index)
        }
        function setPageLi(i) {
            var pages = document.getElementById('pages')
            for (var index = 0; index < pageCount; index++) {
                pages.children[index].className = ''
            }

            pages.children[i].className = 'selected'
 }
 var right=function(){
   
                current = (current + 90);
                document.getElementById("cubic_w").style.transform = "rotateY(" + current + "deg)"

            }
var left=function(){
    current = (current - 90);
                document.getElementById("cubic_w").style.transform = "rotateY(" + current + "deg)"
            } 
            var total = []
  var  buy=function(){
        function buy(id) {
            total.push(id)
            localStorage.setItem('total', JSON.stringify(total))
        }
           
        
    }
           
        

        //
        
    </script>


</head>

<body style="overflow:-Scroll;overflow-x:hidden">
    <!-- 去掉 横向滚动条 -->

    <div id="head1111">

        <div id="menu1111">
            <ul>
                <li><a href="index.html" id="index">首页</a>
                <li>
                <li><a href="menu.html" title="">在线订餐</a>
                <li>
                <li><a href="discount.html" title="">优惠活动</a>
                <li>
                <li><a href="News.html" title="">新闻资讯</a>
                <li>
                <li><a href="Contact us.html" title="">联系我们</a>
                <li>

            </ul>
        </div>
        <div id="logo1111">
            <img src="images/logo1.png" alt="" class="ph1111">
        </div>
    </div>


    <div id="stage">
        <div id="discount_left" onclick="left()"></div>
        <div id="discount_right"  onclick="right()"></div>
        <div id="cubic_w">
            <div id="cubic">

                <div class="front">
                    <div class="zhao"></div><img id="frist" src="images/discount_2.jpeg" alt="">
                </div>
                <div class="behind">
                    <div class="zhao"></div> <img id="rigth" src="images/discount_timg.jpg" alt="">
                </div>
                <div class="left">
                    <div class="zhao"></div> <img id="left" src="images/discount_timg3.jpg" alt="">
                </div>
                <div class="right">
                    <div class="zhao"></div><img id="down" src="images/discount_timg1.jpg" alt="">
                </div>
            </div>
        </div>
    </div>


    <div id="list">
        <h1>OUR DISCOUNT</h1>
        <h2>我们的优惠</h2>
        <div id="foodsList">
            <ul id="foods">

            </ul>
            <div>
                <ul id="pages">
                </ul>
            </div>
        </div>
        <div id="float">
            <a href="Shopping cart.html"></a>
        </div>
    </div>
    <footer style="clear: both">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">优惠活动</a></li>
            <li><a href="">在线订餐</a></li>
            <li><a href="">新闻资讯</a></li>
            <li><a href="">关于我们</a></li>
        </ul>
        <div id="footer1">
            <p><img id="img2" src="images/Iphone.png" alt=""><span id="span2">150xxxxxx2014</span></p>
        </div>
        <p>互联网出版许可证编号新出网证（沪）字 7777777号</p>
        <script>
            var jsondata = {
                "foods": [
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner1.jpg"
                    },
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner2.jpg"
                    },
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner3.jpg"
                    },
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner4.jpg"
                    },
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner5.jpg"
                    },
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner6.jpg"
                    },
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner7.jpg"
                    },
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner8.jpg"
                    },
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner1.jpg"
                    },
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner1.jpg"
                    },
                    {
                        "name": "米特",
                        "way": "￥35",
                        "image": "inner1.jpg"
                    },
                ]
            }
        </script>
</body>

</html>